<template>
	<view class="body">
		<view class="adsCon">
			<!-- <view class="list">
				<view>原密码</view>
				<input type="text" placeholder="请输入原密码" v-model="old_paypsd" password maxlength="6">
				<text @click="jump('/pages/index/set/forgetPayPsd')">忘记密码</text>
			</view> -->
			<view class="list">
				<view>图形验证码</view>
				<input type="text" placeholder="请输入图形验证码" v-model="picCode">
				<image :src="verificationCode" style="width: 200upx;height: 60upx" @tap="codePic()"></image>
			</view>
			<view class="list">
				<view>验证码</view>
				<input type="text" placeholder="请输入验证码" v-model="code.y_code">
				<button class="cu-btn code-btn" :disabled="code.status" @tap="getCode" style="font-size: 28rpx;text-align: right;width: auto;">{{ code.text }}</button>
			</view>
			<view class="list">
				<view>设置新密码</view>
				<input type="text" placeholder="请设置6位纯数字支付密码" v-model="new_paypsd" password maxlength="6">
			</view>
			<!-- <view class="list">
				<view>确认密码</view>
				<input type="text" placeholder="请确认密码" v-model="re_paypsd" password maxlength="6">
			</view> -->
		</view>
		<view class="subBtn">
			<view @click="submit">提交</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				old_paypsd:'',
				oldPsd: '',
				new_paypsd: '',
				re_paypsd: '',
				code: {
					text: '获取验证码',
					status: false,
					y_code: ''
				},
				mobile:'',
				verificationCode:'',
				verificationNumber:'',
				picCode:''
			}
		},
		onLoad() {
			uni.getStorage({
				key: 'loginInfo',
				success: (ret) => {
					// console.log(ret.data);
					this.mobile = ret.data.mobile
				}
			})
		},
		onShow() {
			this.getFromToken();
			this.codePic()
		},
		methods: {
			//图形验证码
			codePic() {
				this.$api.getImgCode({data:1}).then(res => {
					if (res.code == 1) {
						this.verificationCode = res.data.data;
						this.verificationNumber = res.data.uuid
					}
				});
			},
			getFromToken() {
				this.$api.getFromToken({data:1}).then(res => {
					if (res.code == 1) {
						this.FromToken = res.FromToken
					}
				});
			},
			jump(path) {
				uni.navigateTo({
					url: path
				})
			},
			//验证码
			getCode() {
				let that = this;
				let countdown = 60;
				that.code.status = true;
				var data = {
					FromToken:this.FromToken,
					mobile:this.mobile,
					uid: uni.getStorageSync('loginInfo').id,
					uuid:this.verificationNumber,
					image_code:this.picCode,
					send_type:2
				};
				that.$api.GetMobileCode(data).then(res => {
					if (res.code === 1) {
						that.code.text = countdown + '秒';
						that.code.status = true;
						let timer = setInterval(() => {
							if (countdown > 0) {
								that.code.text = countdown - 1 + '秒';
								countdown--;
							} else {
								clearInterval(timer);
								that.code.text = '获取验证码';
								that.code.status = false;
							}
						}, 1000);
					} else {
						that.code.status = false;
					}
				});
			},
			submit() {
				var $this = this;
				var reg = new RegExp(/^\d{6}$/);
				if (!$this.code.y_code) {
					$this.$msg('请输入验证码');
					return;
				}
				if (!reg.test($this.new_paypsd)) {
					$this.$msg('请输入6位纯数字支付密码');
					return;
				}
				var data = {
					mobile_code: $this.code.y_code,
					safe_pwd: $this.new_paypsd,
					FromToken:$this.FromToken,
					uid:uni.getStorageSync('loginInfo').id
				};
				$this.$api.revisePayPassword(data).then(res => {
					$this.$msg(res.msg)
					if (res.code == 1) {
						setTimeout(function() {
							uni.navigateBack()
						}, 800)
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.code-btn {
		background: none !important;
		font-size: 30rpx;
		color: $zhuse !important;
		// border-left: 1rpx solid #d0b17b;
		border-radius: 0;
		height: 68rpx;
		width: 140rpx !important;
		padding: 0;
	}

	page,
	.body {
		background: #f3f3f3;
		width: 100%;
		height: 100vh;
		overflow-x: hidden;
		overflow-y: auto;
	}

	.adsCon {
		width: 100%;
		margin-top: 20upx;

		.list {
			font-size: 28upx;
			color: #333;
			padding: 0 30upx;
			height: 102upx;
			background: #fff;
			border-bottom: 2upx solid #f3f3f3;
			display: flex;
			align-items: center;

			view {
				width: 170upx;
			}

			input {
				height: 100%;
				flex: 1;
				font-family: '微软雅黑';
				font-size: 28upx;
				color: #333;
			}

			navigator,
			text {
				color: $zhuse;
			}
		}
	}

	.subBtn {
		padding: 0 20upx;
		margin-top: 80upx;

		view {
			width: 100%;
			height: 90upx;
			font-size: 32upx;
			color: #fff;
			background: $zhuse;
			border-radius: 20upx;
			text-align: center;
			line-height: 90upx;
		}
	}
</style>
